<!DOCTYPE html>

<html lang="en" style="padding:0;margin:0;">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../icon/iconfont.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="padding:0;margin:0;">
    <script src="../js/jquery-2.0.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <div class="main">
        <div class="title">
            <div class="one">资 产 清 单</div>
            <div class="two">ASSET INVENTORY</div>
        </div>
        <div class="tab">
            <div class="info">
                <div class="choose">
                    <div class="left">类 型:</div>
                    <span class="iconfont iconanzhuoxiala"></span>
                </div>
                <div class="choose">
                    <div class="left">名 称:</div>
                    <span class="iconfont iconanzhuoxiala"></span>
                </div>
                <div class="choose">
                    <div class="left">状 态:</div>
                    <span class="iconfont iconanzhuoxiala"></span>
                </div>
                <div class="button">开 始 搜 索</div>
            </div>
        </div>
        <table class="table table-bordered " style="background-color:#aa6253;" id="table">
            <thead>
                <tr>
                    <th class="order">序号</th>
                    <th class="device">设备类型</th>
                    <th class="devicename">设备名称</th>
                    <th class="num">数量</th>
                    <th class="update">更新日期</th>
                    <th class="status">状态</th>
                </tr>
            </thead>
        </table>
        <table id="table" class="table2 table table-bordered table-striped">
            <tr>
                <th class="order">1</th>
                <td class="device">影音设备</td>
                <td class="devicename">电视</td>
                <td class="num">1台</td>
                <td class="update">2017-09-21 20时</td>
                <td class="status">未分配 </td>
            </tr>
            <tr>
                <th>2</th>
                <td>办公用品</td>
                <td>打印机</td>
                <td>50台</td>
                <td>2017-09-21 20时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>3</th>
                <td>办公用品</td>
                <td>电脑</td>
                <td>16台</td>
                <td>2017-09-21 19时</td>
                <td>未分配</td>
            </tr>
            <tr>
                <th>4</th>
                <td>办公用品</td>
                <td>投影仪</td>
                <td>13台</td>
                <td>2018-03-01 19时</td>
                <td>未分配</td>
            </tr>
            <tr>
                <th>5</th>
                <td>电力监控</td>
                <td>智能电表</td>
                <td>19台</td>
                <td>2020-09-21 19时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>6</th>
                <td>办公用品</td>
                <td>白板</td>
                <td>5台</td>
                <td>2020-08-28 14时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>7</th>
                <td>办公用品</td>
                <td>电话</td>
                <td>205台</td>
                <td>2020-08-28 14时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>8</th>
                <td>自控设备</td>
                <td>风管温度传感器</td>
                <td>170台</td>
                <td>2020-03-23 09时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>9</th>
                <td>家具</td>
                <td>饮水机</td>
                <td>53台</td>
                <td>2020-09-21 19时</td>
                <td>使用中</td>
            </tr>
            <tr>
                <th>10</th>
                <td>自控设备</td>
                <td>电动调节阀</td>
                <td>143台</td>
                <td>2020-09-21 19时</td>
                <td>使用中</td>
            </tr>
        </table>
        <div style="height: 80px; float: right;">
            <nav aria-label="..." class="pagination">
                <ul class="pagination">
                    <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    </li>
                    <li class="active"><a style="color: #fff;" href="#">1</a></li>
                    <li><a style="color: #fff;" href="#">2</a></li>
                    <li><a style="color: #fff;" href="#">3</a></li>
                    <li><a style="color: #fff;" href="#">4</a></li>
                    <li class="disabled">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>
<style>
*{
	margin: 0px;
    padding: 0px;
    box-sizing:border-box;
    list-style:none
}
.main {
        background: #2a4b54;
        height: 1080px;
        width: 650px;
        padding: 25px;
}
.title {
    height: 70px;
    background-color:cornflowerblue;
    padding-left: 40px;
    background: url(../image/123456.png) left bottom no-repeat;
    margin-bottom: 100px;
    text-align: left;
}
.title .one{
    font-size: 28px;
    margin-bottom: 5px;
    color: #ed9237;
}
.title .two{
    font-size: 12px;
    color: rgba(255, 255,255, 0.5);
}
.tab {
    height: 50px;
    background-color: rgba(255, 255,255, 0.1);
    padding: 10px 5px;
    margin-bottom: 15px;
}
.tab .info{
    height: 30px;
}
.tab .info .choose {
    width: 145px;
    height: 30px;
    border: 1px solid rgba(255, 255,255, 0.3);
    float: left;
    margin-right: 6px;
    position: relative;
}
.choose .iconfont {
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 2px;
    bottom: 1px;
    color: #fff;
    font-size: 10px;
}
.choose .left {
    width: 49px;
    height: 100%;
    background-color: rgba(255, 255,255, 0.2);
    text-align: center;
    color: #fff;
    font-size: 15px;
    padding-top: 2px;
}
.info .button {
    height: 100%;
    width: 110px;
    background-color: #215155;
    border: 2px solid #4b7977;
    float: right;
    text-align: center;
    color: #fff;
    font-size: 15px;
    padding-top: 3px;
}
#table {
    margin-bottom: 5px;
}
#table th,
#table td{
    text-align: center;
    color: #fff;
}
table tr .order,
table tr .num{
    width: 12%;
}
table tr .device,
table tr .devicename{
    width: 17%;
}
table tr .update{
    width: 26%;
}
table tr .status{
    width: 16%;
}
.table2{
    margin-bottom: 50px;
}
</style>